

<script setup lang="ts">
import api_blog from '@/api/blog/blog'
import { reactive, onMounted } from "vue";
import { getOptNameType } from "@/utils/utils";
import { useRouter } from "vue-router";
const router = useRouter()
let state = reactive({
    typeList: Array(),
    tagList: Array()
})
const navTo = (value: any, type: any) => {
    router.push({ path: "/placeFileClassify", query: { type, value } });
};
onMounted(async () => {
    let res = await api_blog.getBlogTypeNum()
    state.typeList = res.data
    getBlogTagNum()
})

const getBlogTagNum = () => {
    api_blog.getBlogTagNum().then((res) => {
        state.tagList = res.data
    })
}

</script>
<template>
    <div class="classifyTag-warp">  
        <div class="classify-content">
            <div class="title">分类</div>
            <el-link v-for="item in state.typeList" :key="item.type"
                style="width: max-content;margin-bottom: 10px;font-size: 18px;" @click="navTo(item.type, 'type')">
                {{ getOptNameType('blog_type', item.type) }}
                （{{ item.count }}）
            </el-link>
        </div>
        <el-divider></el-divider>
        <div class="tag-content">
            <div class="title" style="color: #67C23A;">标签</div>
            <el-link v-for="item in state.tagList" :key="item.tag"
                style="min-width: 100px;margin-bottom: 10px;font-size: 18px;" @click="navTo(item.tag, 'tag')">
                {{ getOptNameType('blog_tag', item.tag) }}（{{ item.count }}）
            </el-link>
        </div>
    </div>
</template>
<style scoped lang="scss">
.classifyTag-warp {
    height: 100%;
}

.classify-title {
    text-align: center;
    margin-bottom: 20px;
}

.title {
    font-size: 18px;
    margin-bottom: 15px;
    color: #409EFF;
}

.classify-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 50%;
    flex-wrap: wrap;
    justify-content: center;
}

.tag-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;

}
</style>